<script setup>
import { ref } from 'vue'
import { getWarehouseApi } from "@/api";
import SelectAddress from "@/views/order/components/SelectAddress.vue";
import { validateNull } from "@/utils/validate.js";
const emit = defineEmits(['selected'])
const formRef = ref();
const selectAddressRef = ref()
const visible = ref(false)
const baseParams = ref({
  order_id: '', // 订单ID
  transport_type: '', // 提货类型1-邮寄发货2-店铺自提3送至第三方平台仓库
  shop_type: null, // 3：选择第三方平台仓库WB、OZON、AVito
  address_id: '', // 1、3：用户收货地址
  transport_shop_id: null // 2：店铺仓库
})
const typeList = [
  { value: 1, label: '邮寄发货' },
  { value: 2, label: '店铺自提' },
  { value: 3, label: '送至第三方平台仓库' },
]
const shopTypeList = [
  { value: 'wb', label: 'WB' },
  { value: 'ozon', label: 'OZON' },
  { value: 'avito', label: 'AVito' }
]
const shopList = ref([])
const sAddress = ref('') // 选中的地址，仅做展示
const rules = {
  shop_type: [{ validator: validateNull, trigger: 'blur' }],
  address_id: [{ validator: validateNull, trigger: 'blur' }],
  transport_shop_id: [{ validator: validateNull, trigger: 'blur' }],
};
const getWarehouseList = () => {
  getWarehouseApi().then((res) => {
    shopList.value = res
  })
}
const selectedAddress = (e) => {
  const { modify_region, addr, id } = e
  baseParams.value.address_id = id
  sAddress.value = modify_region.name + addr
  selectAddressRef.value.close()
}
// 提交
const submit = () => {
  formRef.value.validate().then((res) => {
    const params = {
      ...res,
      order_id: baseParams.value.order_id
    }
    emit('selected', params)
  })
}
const open = (order) => {
  const {id, transport_type} = order
  baseParams.value.order_id = id
  baseParams.value.transport_type = transport_type
  visible.value = true
  getWarehouseList()
}
const close = () => {
  visible.value = false
}
defineExpose({
  open,
  close
})
</script>

<template>
  <a-modal v-model:open="visible" title="切换提货方式" :footer="null">
    <div class="express-type">
      <a-form
        ref="formRef"
        :model="baseParams"
        :rules="rules"
        labelAlign="right"
      >
        <a-form-item name="transport_type" label="自提方式">
          <a-select v-model:value="baseParams.transport_type" >
            <a-select-option :value="type.value" v-for="type in typeList" :key="type"> {{ type.label }} </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="shop_type" label="店铺类型" v-if="baseParams.transport_type === 3">
          <a-select v-model:value="baseParams.shop_type" placeholder="请选择店铺类型">
            <a-select-option :value="type.value" v-for="type in shopTypeList" :key="type"> {{ type.label }} </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="transport_shop_id" label="店铺仓库" v-if="baseParams.transport_type === 2">
          <a-select v-model:value="baseParams.transport_shop_id" placeholder="请选择店铺仓库">
            <a-select-option :value="type.id" v-for="type in shopList" :key="type"> {{ type.name }} </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="address_id" label="收货地址" v-if="baseParams.transport_type !== 2">
          <div class="pick-address" @click="selectAddressRef.open()">
            <div class="value" :class="sAddress?'a-value':''"> {{ sAddress?sAddress:'请选择收货地址' }} </div>
            <i class="fa-solid fa-angle-right"></i>
          </div>
        </a-form-item>
      </a-form>
      <div class="btn-box">
        <div class="btn" @click="submit"> 提 交 </div>
      </div>
      <SelectAddress ref="selectAddressRef" @selected="selectedAddress"/>
    </div>
  </a-modal>
</template>

<style scoped lang="scss">
.express-type {
  gap: 10px;
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  .pick-address {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: end;
    border: 1px solid #d9d9d9;
    padding: 0 11px;
    border-radius: 6px;
    .value {
      flex: 1;
      color: #bfbfbf;
      text-align: left;
      &.a-value {
        color: #242424;
      }
    }
    .fa-solid {
      color: #d9d9d9;
    }
  }
  .btn-box {
    .btn {
      width: 100%;
      color: #fff;
      cursor: pointer;
      padding: 8px 24px;
      text-align: center;
      border-radius: 20px;
      background-color: var(--primary);
      transition: all ease-in-out .3s;
      &:hover {
        background-color: var(--primary-hover);
      }
    }
  }
}
</style>